<template>
    <div
        class="com-nav-bar"
        :class="tocType === 'half' ? 'half-toc' : 'full-toc'"
    >
        <h3 class="com-nav-bar-title" v-if="tocType === 'full'">目录</h3>
        <span class="delete-warp" @click="closeToc">
            <Icon _type="delete" :_back="true" :_hover="ishover"></Icon>
        </span>

        <ul class="com-nav-bar-menu" ref="toc">
            <li
                v-for="(item, index) in navlist"
                :key="index"
                class="menu-item"
                :class="active == index ? [item.lev, 'active'] : item.lev"
                @click="jump(index)"
            >
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        navlist: {
            type: Array,
            default: () => [],
        },
        tocType: {
            type: String,
            default: 'half',
        },
        // tocScrollTop: {
        //     type: Number,
        //     default: 0,
        // },
    },
    computed: {
        ishover() {
            if (this.tocType == 'half') {
                return false
            } else {
                return true
            }
        },
    },
    watch: {
        active(cur) {
            if (this.active > 3) {
                this.$refs.toc.scrollTop = cur * 30
            }
        },
    },
    data() {
        return {
            active: 0,
            ll: '',
            height: 0,
        }
    },
    methods: {
        // 关闭Toc目录
        closeToc() {
            this.$emit('closeToc')
            this.$store.commit('app/CLOSE_TOC')
        },
        jump(index) {
            // 元素到顶部的高度
            let height = this.navlist[index].offsetTop + 380
            // document.documentElement.scrollTop = document.body.scrollTop =
            //     height + 60
            // 当前页面滚动的高度
            // let timer = setInterval(() => {
            //     let scrollTop =
            //         document.documentElement.scrollTop ||
            //         document.body.scrollTop
            //     // 滚动条需要移动的距离
            //     let distance = Math.floor(height - scrollTop + 60)
            //     let ispeed = Math.floor(distance / 8)

            //     document.documentElement.scrollTop = document.body.scrollTop =
            //         scrollTop + ispeed
            //     if (ispeed == 0) {
            //         clearInterval(timer)
            //     }
            // }, 16)
            document.documentElement.scrollTop = height
            document.body.scrollTop = height
        },
        // 设置滚动条的滚动距离
        dataScroll() {
            let ll = parseInt(
                window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop
            )
            this.findElement(ll)
        },
        // 找出当前正在浏览的元素
        findElement(ll) {
            for (let i = 0; i < this.navlist.length; i++) {
                if (this.navlist[i].offsetTop + 380 < ll) {
                    continue
                } else {
                    this.active = i
                    break
                }
            }
        },
    },
    mounted() {
        window.addEventListener('scroll', this.dataScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.dataScroll)
    },
}
</script>
<style lang="less" scoped>
.com-nav-bar {
    position: relative;
    font-family: 'pingfang SC', 'helvetica neue', arial, 'hiragino sans gb',
        'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    min-width: 270px;
    max-width: 300px;
    margin: 0;
    padding: 0;
    padding: 10px 2px;
    background-color: #f4f5f5;
    border-radius: 4px;
    .delete-warp {
        position: absolute;
        opacity: 0;
        transition: all 1s;
        right: 0;
        z-index: 1000;
    }
    &:hover .delete-warp {
        opacity: 1;
    }
    .com-nav-bar-title {
        font-family: 'pingfang SC', 'helvetica neue', arial, 'hiragino sans gb',
            'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 26px;
        font-weight: 500;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px #fff solid;
    }
    .com-nav-bar-menu {
        overflow-y: auto;
        max-height: 300px;
        word-wrap: break-word;
    }
    .menu-item {
        cursor: pointer;
        position: relative;
        margin: 5px 0;
        margin-left: -2px;
        color: #333;
        padding: 6px 0;
        margin-left: 9px;
        padding-left: 6px;
        border-radius: 4px;

        &:hover {
            color: #00a4ff;
            background-color: #fff;
        }
        &.lev-3 {
            padding-left: 25px !important;
            color: #666;
        }
        &.lev-4 {
            padding-left: 40px !important;
            color: #666;
        }
        &.lev-2 {
            font-weight: 700px;
        }
        &.active {
            color: #00a4ff;

            // border-left: 2px solid #00a4ff;
            &::before {
                content: '';
                position: absolute;
                top: 1px;
                left: -9px;
                margin-top: 7px;
                width: 4px;
                height: 16px;
                background: #1e80ff;
                border-radius: 0 4px 4px 0;
            }
        }
    }
}
.full-toc {
    .delete-warp {
        position: absolute;
        top: 0;
        opacity: 1;
        z-index: 1000;
    }
}
.half-toc {
    .com-nav-bar-menu {
        border: none;
        word-wrap: break-word;
    }
    .delete-warp {
        position: absolute;
        bottom: -50px;
        right: 0;
        opacity: 1;
        z-index: 1000;
    }
    .menu-item {
        border-bottom: 2px dashed #f7f7f7;
        padding: 3px 3px 3px 10px;
        &:hover {
            color: #00a4ff;
        }
        &.lev-3 {
            padding-left: 25px !important;
            color: #666;
        }
        &.lev-4 {
            padding: 3px 0 3px 45px;
            color: #666;
        }
        &.lev-2 {
            font-weight: 700px;
        }
        &.active {
            position: relative;
            color: var(--default);
            border: none;
            padding-left: 10px;
            background-color: #fff;
        }
        &.active::before {
            content: '';
            position: absolute;
            background: rgba(80, 80, 80, 0.04);
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
        }
        &.active::after {
            content: '';
            position: absolute;
            height: 100%;
            border-left: 3px var(--default) solid;
            top: 0px;
            left: 0px;
        }
    }
}
</style>
